*{margin: 0;padding: 0;list-style: none;}
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
  margin: 0;
  padding: 0;
}
/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
  font: 12px/1.5 "微软雅黑", "Microsoft yahei", \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/** 重置列表元素 **/
ul, ol { list-style: none; }
 
/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: none; }
/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
html,body{min-height:100%;}
body{background-color: #f8f8f8;}
.line-tips{
  display: block;
  width: 24px;
  height: 3px;
  background-color:#1eb9ee;
}

/* header start */
header{
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 999;
  display: block;
  width: 100%;
  padding-top: 24px;
  padding-bottom: 10px;
  transition:all 0.6s ease-in-out 0s;
}
header.fixed{
  position: fixed;
  padding-top: 10px; 
  background-color: #000216;
  box-shadow: 0px 0px 6px 0px #000;
}
header .header-nav{
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
}
header .header-nav-l{
  float: left;
  width: 84px;
  height: 0px;
  padding-top: 37px;
  overflow: hidden;
  background: url('../images/logo.png') no-repeat left top;
}
header .header-nav-r{
  padding-left: 120px;
  float: left;
}
header .header-nav-r>a{
  position: relative;
  color: #fff;
  text-align: center;
  line-height:36px;
  display: block;
  float: left;
  width: 82px;
  height: 36px;
  font-size: 14px;
  margin-left: 40px;
  background:url(../images/nav_on_dark.svg) no-repeat center;
  background-size:0%;
  transition: color 0.4s linear 0s,background-size 0.3s ease-in-out 0s;
}
header .header-nav-r>a::after{
  content:"";
  display:block;
  position: absolute;
  top:0px;
  left: 0px;
  width: 82px;
  height: 36px;
  background:url(../images/nav_on_dark.svg) no-repeat center;
  background-size:0%;
  transition:background-size 0.3s ease-in-out 0s,opacity 0.8s ease-in-out 0s;
  z-index: -999;
  opacity: 0;
}

header .header-nav-r>a:hover,
header .header-nav-r>a.active
{
  color:#1eddee;
}

header .header-nav-r>a.active::after,
header .header-nav-r>a:hover::after{
  opacity: 1;
  background:url(../images/nav_on_dark.svg) no-repeat center;
  background-size:100%;
}

header .header-nav-r>a:first-child{
  margin-left: 0px;
}

header .language{
  float: right;
  font-size: 14px;
  line-height: 37px;
}
header .language>a{
  color: #fff;
}
header .language>a:first-child{
  padding-right: 20px;
}
header .language>a.active{
  color:#1eddee;
}

/* header end */

/* footer start */
footer{
  display:block;
  width: 100%;
  background-color:#000217; 
}
footer>.copyright{
  font-size: 12px;
  color:#fff;
  padding:12px 0px;
  text-align: center;
}

/* footer end */

/* 时间轴 导航 start  */
.about-l-step{
  width: 180px;
  /* overflow: hidden; */
}
.scroll-content{
  width: 200px;
  height: 470px;
  overflow-x: hidden;
  overflow-y: hidden;
  cursor: pointer;
  padding: 5px 0px;
  
}
.timer-ul .year{
  font-size:12px;
  color:#000216;
  line-height: 10px;
}
.timer-ul>li{
  height:60px; 
  cursor: pointer;
  padding-left: 40px;
  position: relative;
}
.timer-ul>li.active{
  cursor: inherit;
}
.timer-ul .year-describe{
  color: #9e9fa9;
  line-height: 36px;
}
.timer-ul>li.active .year{
  font-size: 14px;
  font-weight: bold;
}
.timer-ul>li::before{
  position: absolute;
  top:-6px;
  left:10px;
  content: "";
  width: 3px;
  height:63px;
}
.before-line>li::before{
  background-color: #cbccd6;
}
.timer-ul>li::after{
  content: "";
  position: absolute;
  top:0px;
  left: 3px;
  width: 23px;
  height: 13px;
  background: url("../images/axis_point_off.svg") no-repeat center;
}
.timer-ul>li:last-child::before{
  display: none;
}
.timer-ul>li.active::after{
  background-image: url("../images/axis_point_on.svg");
}
/*  以上是时间轴导航公共样式 */



/* 面包屑导航样式 */
.about-r-crumbs-nav>ul{
  overflow: hidden;
}
.about-r-crumbs-nav>ul>li{
  padding: 0px 25px 0px 20px;
  font-size: 14px;
  color: #000216;
  float: left;
  position: relative;
}
.about-r-crumbs-nav>ul>li::after{
  content: ">>";
  letter-spacing: -5px;
  color: #383c46;
  position: absolute;
  right: 0px;
  top: 0px;
}
.about-r-crumbs-nav>ul>li:last-child::after{
  display: none;
}

/*面包屑导航样式  end*/




/* 带三角的标题 icon 年份  */
.date-icon-triangle{
  font-family: 'customfont';
  padding: 15px 6px 19px;
  background-color: #9e9fa9;
  color: #fff;
  float: left;
  font-size: 12px;
  position: relative;
}
.date-icon-triangle::after{
  content: "";
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 0px;
  height: 0px;
  border-top:10px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 26px solid yellow;
}

.date-icon-triangle>span{
  font-size: 24px;
  display: block;
  text-align: center;
  line-height: 27px;
}
.date-icon-triangle>p{
  transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
}
.date-icon>p{
  transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
}
/* 带三角的标题 icon 年份 e 你  nd  */


/* 普通导航 start */

.tab-ul{
  font-size:14px;
  color:#9e9fa9;
}
.tab-ul>li{
  width: 236px;
  height: 63px;
  background-color: #fff;
  text-align: center;
  line-height: 63px;
  position: relative;
  margin-bottom: 6px;
  cursor: pointer;
}
.tab-ul>li::before{
  content: "";
  width:0px;
  height:0px;
  border-top: 6px solid transparent;
  border-left: 16px solid #9e9fa9;
  border-bottom: 6px solid transparent;
  position: absolute;
  left: 48px;
  top: 25px;
}
.tab-ul>li.active{
  color: #000216; 
  font-weight: bold;
  cursor: inherit;
}
.tab-ul>li.active::before{
  border-left-color:#fff100;
}

.location-svg{
  float: left;
  padding-top: 3px;
}


/* 自定义滚动条 */
.about-l-step{
  position: relative;
}
.scroll-sole{
  width: 5px;
  height: 425px;
  position: absolute;
  top: 38px;
  left: 44px;
  border-radius: 16px;
  /* z-index: 9999; */
  background-color:#d5d6de;
  box-shadow: 0px 0px 3px 0px #777575 inset;
}
.scroll-bar{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 5px;
  background:linear-gradient(to left,#808e9f,#6b7888);
  border-radius: 5px;
  display: none;
}

.article-content{
  color: #383c46;
  font-size: 14px;
}
.article-content>p{
  text-indent: 2em;
  line-height: 25px;
}
.article-content>img{
  display: block;
  width: 100%;
  height: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.article-content>img:first-child{
  margin-top: 0;
}
@font-face {
  font-family: customfont;
  src: url('../fonts.OTF');
}